<template>
    <div class="image-container">
        <n-scrollbar class="image-result-content">
            <div class="img-descript">
                {{ imgDescript }}
            </div>
            <div class="img-content">
                <img :src="imageSrc" />
            </div>
        </n-scrollbar>
        <div class="image-describe">
            <n-input-group>
                <n-input v-model:value="ideaText" placeholder="输入你的想法" :style="{ width: '100%' }" />
                <n-button :loading="loading" type="primary" ghost @click="startGenerationImage">
                    发送
                </n-button>
            </n-input-group>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useConfigStore } from '@/stores/config';
import { useMessage } from 'naive-ui';
import { ref } from 'vue';
import { useYouDaoTranslate } from '@/utils/youdao';
import { APP_ID, SECRET_KEY } from '@/config/youdao';
import { currentTime, youdaoSign } from '@/utils';

const ideaText = ref('');
const loading = ref(false);
const imageSrc = ref('');

const imgDescript = ref('');
const configStore = useConfigStore();
const { httpsTextTranslate } = useYouDaoTranslate();
const message = useMessage();

function truncate(q) {
    var len = q.length;
    if (len <= 20) return q;
    return q.substring(0, 10) + len + q.substring(len - 10, len);
}

/**
 * 开始生产图片
 */
const startGenerationImage = async () => {
    if (!ideaText.value) {
        return;
    }
    loading.value = true;
    fetch('https://api.openai.com/v1/images/generations', {
        method: 'POST',
        headers: {
            Authorization: "Bearer " + configStore.apikey,
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            "model": "dall-e-3",
            "prompt": ideaText.value,
            "n": 1,
            "size": "1792x1024",
            "quality": "hd",
            "response_format": "b64_json"
        })
    })
        .then(response => response.json())
        .then(data => {
            imageSrc.value = 'data:image/jpeg;base64,' + data.data[0].b64_json;
            imgDescript.value = data.data[0].revised_prompt;
            const curTime = currentTime();
            console.log(httpsTextTranslate({
                q: imgDescript.value,
                from: 'en',
                to: 'zh-CHS',
                appKey: APP_ID,
                salt: 'jodo1123o13o1u3oiu213',
                sign: youdaoSign(APP_ID + truncate(imgDescript.value) + 'jodo1123o13o1u3oiu213' + curTime + SECRET_KEY),
                signType: 'v3',
                curtime: curTime
            }))
        })
        .catch(error => message.error(error.message))
        .finally(() => {
            loading.value = false;
        });
}
</script>

<style lang="scss">
.image-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    position: relative;

    .image-result-content {
        width: 100%;
        max-height: calc(100% - 4rem);
        position: relative;
        // background-color: cadetblue;

        .img-descript {
            width: 100%;
            height: auto;
            position: relative;
            padding: 1rem;
            display: flex;
        }

        .img-content {
            width: 100%;
            height: auto;
            position: relative;

            img {
                width: 100%;
            }
        }
    }

    .image-describe {
        width: 100%;
        height: 4rem;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        // background-color: antiquewhite;
    }
}
</style>